<template>
  <div>
    <el-table :data="tableData" v-bind="$attrs" :max-height="tableHeight"
              ref="tableRef">
      <el-table-column v-if="isSelection" type="selection" align="center"/>
      <el-table-column v-if="isIndex" label="序号" type="index" width="55" align="center"/>
      <el-table-column v-for="(item,index) in tableColumn"
                       :label="item.label"
                       :prop="item.prop"
                       :key="index"
                       :sortable="item.sortable ?? false"
                       :show-overflow-tooltip="item.showOverflowTooltip ?? true"
                       :width="item.width ?? ''"
                       :fixed="item.fixed ?? false"
                       :align="item.align || 'center'">
        <template #header>
          <slot v-if="item.slotHeaderName" :name="item.slotHeaderName">
          </slot>
          <div v-else>
            {{ item.label }}
          </div>
        </template>
        <template #default="{row}">
          <div v-if="item.render" v-html="item.render(row)"></div>
          <slot v-else-if="item.slotName" :name="item.slotName" :row="row"></slot>
          <template v-else> {{ row[item.prop] ?? '-' }}</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center" v-if="isOperation" fixed="right">
        <template #header>
          <el-icon @click="columnOperation" style="cursor: pointer">
            <Menu/>
          </el-icon>
        </template>
        <template #default="{row}">
          <slot name="operation" :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="mt-5 flex justify-end"
        v-model:current-page="page.current"
        v-model:page-size="page.size"
        :page-sizes="[5, 10, 20, 30]"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<script setup>
import {computed, onUpdated, ref} from 'vue'
import UseModel from '@/composables/useModel.js'

defineOptions({
  name: 'MTable'
})
const tableHeight = computed(() => {
  return document.documentElement.clientHeight - 280
})
const tableRef = ref()
onUpdated(() => {
  tableRef.value?.doLayout()
})

const props = defineProps({
  tableColumn: {
    type: Array,
    required: true,
    default: () => []
  },
  tableData: {
    type: Array,
    required: true
  },
  isSelection: {
    type: Boolean,
    default: false
  },
  isIndex: {
    type: Boolean,
    default: false

  },
  isOperation: {
    type: Boolean,
    default: true
  },
  pagination: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['change', 'update:pagination'])
const page = UseModel(props, 'pagination', emit)

const handleSizeChange = () => {
  emit('change')
}
const handleCurrentChange = () => {
  emit('change')
}

function columnOperation() {

}
</script>

<style scoped lang="scss">
</style>

